<template>
  <view class="inventory-container">
    <!-- 搜索框 -->
    <view class="search-section">
      <uni-search-bar 
        placeholder="搜索任务名称或编号" 
        @confirm="handleSearch"
        @input="handleSearchInput"
        @clear="handleClear"
        :value="searchKeyword"
        @change="handleSearchChange"
        radius="20"
        bgColor="#f8f9fa"
      ></uni-search-bar>
    </view>
    
    <!-- 任务列表 -->
    <view class="task-list">
      <view 
        class="task-card" 
        v-for="(task, index) in displayTaskList" 
        :key="task.id"
        @click="goToInventoryInfo(task)"
      >
        <view class="card-header">
          <view class="task-info">
            <text class="task-name">{{ task.name }}</text>
            <text class="task-number">编号：{{ task.number }}</text>
          </view>
          <view class="task-date">
            <text class="date-label">计划完成</text>
            <text class="date-value">{{ task.planDate }}</text>
          </view>
        </view>
        
        <!-- 资产统计信息 -->
        <view class="task-stats">
          <view class="stats-mini-row">
            <view class="stat-mini-item">
              <text class="stat-mini-number">{{ task.stats.total }}</text>
              <text class="stat-mini-label">总数</text>
            </view>
            <view class="stat-mini-item">
              <text class="stat-mini-number">{{ task.stats.completed }}</text>
              <text class="stat-mini-label">已盘</text>
            </view>
            <view class="stat-mini-item">
              <text class="stat-mini-number">{{ task.stats.pending }}</text>
              <text class="stat-mini-label">未盘</text>
            </view>
          </view>
          <view class="stats-mini-row">
            <view class="stat-mini-item">
              <text class="stat-mini-number profit">{{ task.stats.profit }}</text>
              <text class="stat-mini-label">盘盈</text>
            </view>
            <view class="stat-mini-item">
              <text class="stat-mini-number loss">{{ task.stats.loss }}</text>
              <text class="stat-mini-label">盘亏</text>
            </view>
            <view class="stat-mini-item">
              <text class="stat-mini-number scrap">{{ task.stats.scrap }}</text>
              <text class="stat-mini-label">报废</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <uni-load-more 
      :status="loadMoreStatus" 
      :content-text="loadMoreText"
      @clickLoadMore="loadMore"
    ></uni-load-more>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="displayTaskList.length === 0 && !isLoading">
      <uni-icons type="info" size="60" color="#ccc"></uni-icons>
      <text class="empty-text">暂无任务</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchKeyword: '',
        taskList: [
          {
            id: 1,
            name: '设备维护检查',
            number: 'TASK-2023-001',
            planDate: '2023-12-15',
            stats: {
              total: 15,
              completed: 12,
              pending: 3,
              profit: 2,
              loss: 1,
              scrap: 0
            }
          },
          {
            id: 2,
            name: '安全巡检任务',
            number: 'TASK-2023-002',
            planDate: '2023-12-18',
            stats: {
              total: 8,
              completed: 5,
              pending: 3,
              profit: 1,
              loss: 0,
              scrap: 0
            }
          },
          {
            id: 3,
            name: '库存盘点',
            number: 'TASK-2023-003',
            planDate: '2023-12-20',
            stats: {
              total: 25,
              completed: 20,
              pending: 5,
              profit: 3,
              loss: 2,
              scrap: 1
            }
          },
          {
            id: 4,
            name: '设备校准',
            number: 'TASK-2023-004',
            planDate: '2023-12-22',
            stats: {
              total: 12,
              completed: 8,
              pending: 4,
              profit: 1,
              loss: 1,
              scrap: 0
            }
          },
          {
            id: 5,
            name: '环境检测',
            number: 'TASK-2023-005',
            planDate: '2023-12-25',
            stats: {
              total: 6,
              completed: 4,
              pending: 2,
              profit: 0,
              loss: 1,
              scrap: 1
            }
          },
          {
            id: 6,
            name: '设备维修',
            number: 'TASK-2023-006',
            planDate: '2023-12-28',
            stats: {
              total: 18,
              completed: 15,
              pending: 3,
              profit: 2,
              loss: 1,
              scrap: 0
            }
          },
          {
            id: 7,
            name: '安全检查',
            number: 'TASK-2023-007',
            planDate: '2023-12-30',
            stats: {
              total: 10,
              completed: 6,
              pending: 4,
              profit: 1,
              loss: 0,
              scrap: 0
            }
          },
          {
            id: 8,
            name: '质量检测',
            number: 'TASK-2023-008',
            planDate: '2024-01-02',
            stats: {
              total: 14,
              completed: 10,
              pending: 4,
              profit: 2,
              loss: 1,
              scrap: 1
            }
          },
          {
            id: 9,
            name: '设备更新',
            number: 'TASK-2023-009',
            planDate: '2024-01-05',
            stats: {
              total: 20,
              completed: 16,
              pending: 4,
              profit: 3,
              loss: 1,
              scrap: 0
            }
          },
          {
            id: 10,
            name: '系统维护',
            number: 'TASK-2023-010',
            planDate: '2024-01-08',
            stats: {
              total: 16,
              completed: 12,
              pending: 4,
              profit: 2,
              loss: 1,
              scrap: 1
            }
          },
          {
            id: 11,
            name: '网络检查',
            number: 'TASK-2023-011',
            planDate: '2024-01-10',
            stats: {
              total: 12,
              completed: 8,
              pending: 4,
              profit: 1,
              loss: 1,
              scrap: 0
            }
          },
          {
            id: 12,
            name: '数据备份',
            number: 'TASK-2023-012',
            planDate: '2024-01-12',
            stats: {
              total: 8,
              completed: 6,
              pending: 2,
              profit: 1,
              loss: 0,
              scrap: 0
            }
          }
        ],
        currentPage: 1,
        pageSize: 5,
        isLoading: false,
        loadedData: [], // 已加载的数据
        loadMoreStatus: 'loading',
        loadMoreText: {
          contentdown: '上拉加载更多',
          contentrefresh: '正在加载...',
          contentnomore: '没有更多数据了'
        }
      }
    },
    computed: {
      filteredTaskList() {
        console.log('搜索关键词:', this.searchKeyword);
        if (!this.searchKeyword || this.searchKeyword.trim() === '') {
          return this.taskList;
        }
        const keyword = this.searchKeyword.toLowerCase().trim();
        const filtered = this.taskList.filter(task => 
          task.name.toLowerCase().includes(keyword) ||
          task.number.toLowerCase().includes(keyword)
        );
        console.log('过滤结果:', filtered.length);
        return filtered;
      },
      displayTaskList() {
        return this.loadedData;
      },
      hasMoreData() {
        const total = this.filteredTaskList.length;
        const current = this.currentPage * this.pageSize;
        return current < total;
      }
    },
    mounted() {
      this.loadInitialData();
    },
    methods: {
      handleSearch(e) {
        console.log('搜索确认:', e);
        const value = e.detail?.value || e.value || '';
        this.searchKeyword = value;
        this.resetPagination();
      },
      handleSearchInput(e) {
        console.log('搜索输入:', e);
        const value = e.detail?.value || e.value || '';
        this.searchKeyword = value;
        this.resetPagination();
      },
      handleClear() {
        console.log('清空搜索');
        this.searchKeyword = '';
        this.resetPagination();
      },
      handleSearchChange(e) {
        console.log('搜索变化:', e);
        const value = e.detail?.value || e.value || '';
        this.searchKeyword = value;
        this.resetPagination();
      },
      loadInitialData() {
        this.currentPage = 1;
        this.loadedData = [];
        this.loadMore();
      },
      resetPagination() {
        this.currentPage = 1;
        this.loadedData = [];
        this.loadMore();
      },
      loadMore() {
        if (this.isLoading || this.loadMoreStatus === 'nomore') {
          return;
        }
        
        this.isLoading = true;
        this.loadMoreStatus = 'loading';
        
        // 模拟加载延迟
        setTimeout(() => {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          const newData = this.filteredTaskList.slice(start, end);
          
          // 将新数据添加到已加载数据中
          this.loadedData = [...this.loadedData, ...newData];
          this.currentPage++;
          
          this.isLoading = false;
          this.updateLoadMoreStatus();
        }, 1000);
      },
      updateLoadMoreStatus() {
        if (this.isLoading) {
          this.loadMoreStatus = 'loading';
        } else if (this.hasMoreData) {
          this.loadMoreStatus = 'more';
        } else {
          this.loadMoreStatus = 'nomore';
        }
      },
      goToInventoryInfo(task) {
        uni.navigateTo({
          url: '/pages/task/inventory/info/index'
        });
      }
    }
  }
</script>

<style lang="scss">
  .inventory-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  .search-section {
    margin-bottom: 20rpx;
  }
  
  .task-list {
    margin-top: 20rpx;
  }
  
  .task-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .task-info {
    flex: 1;
    
    .task-name {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 8rpx;
      line-height: 1.4;
    }
    
    .task-number {
      display: block;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .task-date {
    text-align: right;
    
    .date-label {
      display: block;
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 4rpx;
    }
    
    .date-value {
      display: block;
      font-size: 26rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }

  .task-stats {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .stats-mini-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .stat-mini-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30%; /* Ensure items don't shrink too much */

    .stat-mini-number {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 8rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);

      &.profit {
        color: #4caf50;
      }

      &.loss {
        color: #f44336;
      }

      &.scrap {
        color: #ff9800;
      }
    }

    .stat-mini-label {
      font-size: 20rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    
    .empty-text {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #999;
    }
  }
</style>
